<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no"/>
<meta name="HandheldFriendly"content="true"/>
<meta http-equiv="x-rim-auto-match" content="none"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no">
<title>房源详情</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="style/css/global.css" rel="stylesheet">
<link href="style/css/swiper.css" rel="stylesheet">
<link href="style/css/common.css" rel="stylesheet">
<!-- <script type="text/javascript" src="style/js/jquery-1.11.1.min.js"></script> -->
<script type="text/javascript" src="style/js/zepto.min.js"></script>
<script type="text/javascript" src="style/js/common.js"></script>
<!-- 最近添加 -->
<style type="text/css">
	.btn_tile {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2000;
	}
	.modal-overlay,.modal-overlay-show {
		/*visibility: hidden;    */
        position: fixed;   
        left: 0px;    
        top: 0px;
        width:100%;
        height:100%;
        text-align:center;
        z-index: 100;
        background-color: rgba(0,0,0,0.5); 
        display: none; 
	}
	.modal-overlay-show {
        z-index: 5000;
        background-color: rgba(255,255,255,0.75); 
	}
	.mask_show_pic {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.mask_show_pic img{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16.75rem;
		height: 12rem;
		margin-top:-6rem; 
		margin-left: -8.375rem;
		box-shadow: 0 0 12px #999;
	}
	.mask {
		border-radius: 4px;
		text-align: center;
		width: 320px;
		height: 200px;
		margin: 50% auto;
		background: rgb(255,255,255);
		margin-top: 160px;
		
	}
	.mask_img img{
		margin-top: 12px;
	}
	.mask a {
		padding: 1rem 3.25rem;
		color: rgb(255,255,255);
		background: #E84A01;
		border-radius: 4px;
	}
	.mask p {
		/*padding: 1.75rem;*/
		margin-bottom: 32px;
	}
	.mask img {
		width: 60px;
	}
	.swiper .swiper-slide img {
		height: 12rem;
		width: auto;
		position: relative;
		left: 50%;
		transform: translate(-50%,0);
		-webkit-transform: translate(-50%,0);
	}
	.swiper-slide {
		background: #fff;
}
	/*添加日期图片*/
	.swiper-container {
    	height: 12rem;
}
	/*添加日期图片结束*/
</style>
<!-- 最近添加结束 -->
</head>

<body class ='contain_mask'>

<div class="wrap">
	<!--头部-->
	<div class="header w_screen">
		<h1 class="title">房源详情</h1>
		<a href="javascript:history.go(-1);" class="btn_left"><span class="ico_back"></span></a>
	</div>

	<!--主体-->
	<div class="main pad_header">
		<div class="swiper-container swiper">
            <div class="swiper-wrapper" style ='opacity:0'>
                <div class="swiper-slide"><img src="style/images/Squares_highres.jpg"></div>
                <div class="swiper-slide"><img src="style/images/img_room_big.jpg"></div>
                <div class="swiper-slide"><img src="style/images/img_room_big.jpg"></div>
                <div class="swiper-slide"><img src="style/images/img_room_big.jpg"></div>
                <div class="swiper-slide"><img src="style/images/img_room_big.jpg"></div>
            </div>
            <div class="pagination"></div>
        </div>

        <div class="room_detail">
			<div class="head">
				<div class="title">北京朝阳区京西园一区 </div>
				<div class ='room_tag'>
					<span>海景房</span>
					<span>双人拼</span>
					<span>独卫</span>
				</div>
				<div class="info">
					<div class="item"><span><img src="style/images/ico_room_info_1.png"></span>距15号线望京步行5分钟</div>
					<div class="item"><span><img src="style/images/ico_room_info_2.png"></span>20㎡ 朝南 4居室 22层
					<span style ='display:inline-block;float: right;color:#FF8562;width:6rem;margin:0'>
						<p style ='text-align:right;font-size: 1rem'>￥750元/月</p>
					</span>
					</div>
				</div>
			</div>
			<div class="theme clearfix"><span>他浦校区 3室2厅</span>
				<a href="javascript:void(0)" class='show_room_pic'>查看户型图
					<div class ='modal-overlay-show'>
						<div class ='mask_show_pic'>
								<img src="./style/images/img_index_banner.jpg">
						</div>
					</div>
				</a>
			</div>
			<div class="table_info">
				<table>
					<tr>
						<td class="hed bg_grey" rowspan="2">RoomA<span class="status status_end">已租</span></td>
						<td>16.0㎡|南</td>
					</tr>
					<tr>
						<td><i class="girl"></i>金融 水瓶座 </td>
					</tr>
				</table>
				<table>
					<tr>
						<td class="hed bg_grey" rowspan="2">RoomB<span class="status status_end">已租</span></td>
						<td>16.0㎡|南</td>
					</tr>
					<tr>
						<td><i class="boy"></i>金融 水瓶座 </td>
					</tr>
				</table>
				<table>
					<tr>
						<td class="hed bg_grey" rowspan="2">RoomC<span class="status">未入住</span></td>
						<td>16.0㎡|南</td>
					</tr>
					<tr>
						<td><span class="price">￥800元/月</span></td>
					</tr>
				</table>
			</div>
			<div class="txt_info">
				<table>
					<tr>
						<td colspan="2"><span>房源编号</span>20150406-00011404</td>
					</tr>
					<tr>
						<td><span>朝南</span>南北方向</td>
						<td><span>楼型</span>塔楼</td>
					</tr>
					<tr>
						<td><span>装修</span>精装</td>
						<td><span>年代</span>2000</td>
					</tr>
					<tr>
						<td><span>卫生间</span>独立</td>
						<td><span>租住状态</span>待出租</td>
					</tr>
					<tr>
						<td><span>契约</span>押一付一</td>
						<td><span>出租方式</span>合租</td>
					</tr>
				</table>
			</div>
			<div class="theme clearfix"><span>房间配套</span></div>
			<div class="device">
				<ul class="clearfix">
					<li><span><img src="style/images/ico_device_c.png"></span><p>床*1</p></li>
					<li><span><img src="style/images/ico_device_yg.png"></span><p>橱柜*1</p></li>
					<li><span><img src="style/images/ico_device_kt.png"></span><p>空调*1</p></li>
					<li><span><img src="style/images/ico_device_zz.png"></span><p>书桌*1</p></li>
				</ul>
			</div>
			<div class="theme clearfix"><span>公共配套</span></div>
			<div class="device">
				<ul class="clearfix">
					<li><span><img src="style/images/ico_device_bx.png"></span><p>冰箱*1</p></li>
					<li><span><img src="style/images/ico_device_sf.png"></span><p>沙发*1</p></li>
					<li><span><img src="style/images/ico_device_xyj.png"></span><p>洗衣机*1</p></li>
					<li><span><img src="style/images/ico_device_ds.png"></span><p>电视机*1</p></li>
				</ul>
			</div>
			<div class="comment set_padding">
				<div class="tit">管家说</div>
				<div class="item">精美的装修，正规主卧室，且带独立卫生间，超好的采光，更给您创造出有品质的生活。</div>
			</div>
        </div>
        <div class="btn_tile">
        		<!-- 最近添加 -->
        	<div class ='modal-overlay'>
        		<div class ='mask'>
        			<div class ='mask_img'>
        				<img src="./style/images/check_right.png">
        			</div>
        			
        			<p>房源以成功加入预约清单</p>
        			
        			<a href="" class ='vanish'>马上预约看房时间</a>
        		</div>
        	</div>
        		<!-- 最近添加结束 -->
			<a class="btn see" href="javascript:void(0)">加入预约看房</a>
		</div>
	</div>
</div>

<div class="wrap_bg w_screen"></div>

<script type="text/javascript" src="style/js/swiper.min.js"></script>
<script>
// 自己添加
	$(function(){
	var showContainer =$('.swiper-wrapper');
	showContainer.css('opacity',1);
	var showRoom=$('.show_room_pic');
	var overlayRoom=$('.modal-overlay-show');
	var maskLay =$('.modal-overlay');
	var btn =$('.see');
	var btnVanish =$('.vanish');
	showRoom.tap(function(e){
		overlayRoom.show();
	})
	overlayRoom.on("touchstart",function(){
		overlayRoom.hide();
	})
	btn.tap(function(e){
		if($(this).css('background-color') =="rgb(216, 216, 216)"){
			return;
		}
		$(this).css('background-color','#D8D8D8');
		maskLay.show();
	})
	$('.mask').on('touchmove',function(e){
            		e.preventDefault();
            	})
	maskLay.on("touchstart",function(e){
		if($(e.target).hasClass("modal-overlay")){
	        maskLay.css('display','none')
	    }else{
	    	return;
	    }
	})
// 自己添加结束
	var mySwiper = new Swiper('.swiper',{
	    autoplay : 3000,
	    calculateHeight : true,
	    loop : true,
	    pagination: '.pagination',
	    paginationClickable: true,
	    slidesPerView: 1
	})
})
</script>
</body>
</html>